<template>
  <div class="">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
          <el-form-item label="" prop="query">
            <el-input v-model="queryParams.query" placeholder="活动名称/合成NFR/会员姓名/手机号" clearable size="small"
              @keyup.enter.native="handleQuery" style="width: 280px" />
          </el-form-item>
          <el-form-item label="合成结果"  prop="status">
            <el-select v-model="queryParams.status" placeholder="全部" size="small">
              <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
					<el-form-item label="合成时间：" prop="date">
            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" 
              start-placeholder="开始日期" end-placeholder="结束日期" >
            </el-date-picker>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
     
      <div class="listBox">
        <div style="margin-bottom: 14px">
          <export-excel-button title="合成明细列表" action="/shenye/casting/activity/record/export" :params="ExportParams" />
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="铸造编号" align="center" prop="castingNo" :show-overflow-tooltip="true" />
          <el-table-column label="活动名称" align="center" prop="castingActivityName" :show-overflow-tooltip="true" />
          <el-table-column label="合成NFR" align="center" prop="castingEquityCardName" :show-overflow-tooltip="true"/>
          <el-table-column label="卡编号" align="center" prop="cardNo" :show-overflow-tooltip="true"/>
          <el-table-column label="合成材料" align="center" prop="castingMaterials" :show-overflow-tooltip="true" width="260">
            <template slot-scope="scope">
                <div class="listArr">
                  <div v-for="(item,index) in scope.row.castingMaterials" :key="index">{{item}}</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="手续费" align="center" prop="castingServiceFee" :show-overflow-tooltip="true"/>
          <el-table-column label="会员姓名" align="center" prop="customerName" :show-overflow-tooltip="true"/>
          <el-table-column label="手机号" align="center" prop="customerPhone" :show-overflow-tooltip="true" />
          <el-table-column label="合成时间" align="center" prop="createTime" :show-overflow-tooltip="true" width="160" />
          <el-table-column label="成功率" align="center" prop="realSuccessRate" :show-overflow-tooltip="true" />
          <el-table-column label="合成结果" align="center" prop="status" :show-overflow-tooltip="true">
             <template slot-scope="scope">
              <dict-tag :options="statusList" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
    </div>
  </div>
  
</template>

<script>
  import {
    adminDict,
		recordList,
  } from "@/api/blindBox/factoryConfig";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton
    },
    props: {
      id: String,
      pathType: String,
    },
    data() {
      return {
        addActivity: false,
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
				// 限时任务表格数据
				statusList: [],
        customerList: [
         
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
					startDate: null,//	开始时间
					endDate: null,//结束时间	
          query: null,//query
          status: '',
        },
        date: [],
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.queryParams.limitTaskId = this.id
      this.getDict()
      this.getList();
    },
    methods: {
      //获取状态字典
      getDict() {
        var dictType = "casting_activity_record_status";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.statusList = arr.concat(res.result[0].dictList);
            // this.statusList = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /** 神椰铸造活动合成明细列表 */
      getList() {
        this.loading = true;
        if (this.date) {
          this.queryParams.startDate = this.date[0]
          this.queryParams.endDate = this.date[1]
        }
        recordList(this.queryParams).then(response => {
            this.total = response.result.total
            this.customerList = response.result.records
            this.customerList = this.customerList.map(item => {
              // console.log('item',item)
              Object.keys(item).forEach(key => {
                if (item[key] === '') {
                  item[key] = '-'
                }
              })
              return item
            })
            
            this.loading = false;
          
        }).finally(()=>{
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
  }
</style>
